<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="模板类型名称" prop="typeName">
            <el-input
               v-model="queryParams.typeName"
               placeholder="请输入模板名称"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <!-- <el-form-item label="字典类型" prop="dictType">
            <el-input
               v-model="queryParams.dictType"
               placeholder="请输入字典类型"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item> -->
         <el-form-item label="状态" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="字典状态"
               clearable
               style="width: 240px"
            >
            <el-option :value="0"/>
            <el-option :value="1"/>
               <!-- <el-option
                  v-for="template in sys_normal_disable"
                  :key="template.value"
                  :label="template.label"
                  :value="template.value"
               /> -->
            </el-select>
         </el-form-item>
         <el-form-item label="创建时间" style="width: 308px">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
         
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
            >导出</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Refresh"
               @click="handleRefreshCache"
            >刷新缓存</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="templateTypeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典编号" align="center" prop="tid" />
         <el-table-column label="字典名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>

         <!-- <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
               <router-link :to="'/system/dict-data/index/' + scope.row.id" class="link-type">
                  <span>{{ scope.row.tid }}</span>
               </router-link>
            </template>
         </el-table-column> -->
         <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
               <dict-tag  :options="sys_normal_disable" v-text="scope.row.status==='0' ? '公有': '私有'  " />
            </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true" />
         <el-table-column label="创建时间" align="center" prop="createDate" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createDate) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="tempType" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="模板类型名称" prop="typeName">
               <el-input v-model="form.typeName" placeholder="请输入模板类型名称" />
            </el-form-item>
            <!-- <el-form-item label="字典类型" prop="dictType">
               <el-input v-model="form.tid" placeholder="请输入字典类型" />
            </el-form-item> -->
            <!-- <el-form-item label="状态" prop="status">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item> -->
            <el-form-item label="备注" prop="remarks">
               <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>
<script setup name="template">

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

import {listTempType,getTempType,addTempType,delTempType,updateTempType} from "@/api/system/template/type"

const templateTypeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);

const data = reactive({
 form: {},
 queryParams: {
   pageNum: 1,
   pageSize: 10,
   typeName: undefined,
   // dictType: undefined,
   status: undefined
 },
 rules: {
   typeName: [{ required: true, message: "，模板名称不能为空", trigger: "blur" }],
   // dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
 },
});

const { queryParams, form, rules } = toRefs(data);

//获取模板类型数据的方法
function getList(){
   loading.value = true;
   listTempType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
       templateTypeList.value = response.rows;
       total.value = response.total;
       loading.value = false;
   });
}


/** 刷新缓存按钮操作 */
function handleRefreshCache() {
 refreshCache().then(() => {
   proxy.$modal.msgSuccess("刷新成功");
   useDictStore().cleanDict();
 });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    tid: undefined,
    typeName: undefined,
    status: "0",
    remarks: undefined
  };
  proxy.resetForm("dictRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 点击修改将获取到的数据给到修改页面并打开*/
function handleUpdate(row){
   reset()
   console.log(row.tid)
   const tid=row.tid
   getTempType(tid).then(response=>{
      console.log(response)
      form.value=response.data
      open.value=true
      title.value='修改模板类型'
   })
}
/**点击新增 */
function handleAdd(){
   reset();
   open.value=true;
   title.value="新增模板类型"
}
/**点击确认按钮事件 */
function submitForm(){
   console.log()
   proxy.$refs["tempType"].validate(valid =>{
      /**判断是修改还是新增 */
      if(valid){
         console.log(form.value)
         if(form.value.tid!=undefined){
            updateTempType(form.value).then(response=>{
               console.log(response)
               proxy.$modal.msgSuccess("修改成功")
               open.value=false;
               getList();
            })
         }else{
            addTempType(form.value).then(response=>{
               proxy.$modal.msgSuccess("新增成功")
               open.value=false;
               getList();
            })
         }
      }
   })
}
/**多选框事件 */
function handleSelectionChange(selection){
   ids.value=selection.map(item=>item.tid)
   multiple.value=!selection.length;
   
}

function handleDelete(row){
   const tIds=row.tid || ids.value;
   proxy.$modal.confirm("确定要删除"+tIds+"的信息吗").then(function(){
      return delTempType(tIds);
   }).then(()=>{
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(()=>{})
}
getList();
</script>